<template>
  <a-modal v-model="modalVisible" title="确定参保">
    <div class="mb12 flex-center">
      <div class="ta-right" style="width: 170px"><span class="tc-red">*</span> 选择商保方案：</div>
      <a-select v-model="schemeId" :options="planLst" placeholder="请选择" style="width: 240px" @change="onSchemeIdChange" />
    </div>
    <div class="mb12 flex-center">
      <div class="ta-right" style="width: 170px"><span class="tc-red">*</span> 选择在保有效区间：</div>
      <a-range-picker
        :value="dateRange"
        :placeholder="['在保开始时间', '结束时间']"
        :mode="['date', 'date']"
        format="YYYY-MM-DD"
        style="width: 240px"
        @panelChange="onPanelChange"
        @change="onRangeChange"
      />
    </div>
    <div class="mb12 flex-center">
      <div class="ta-right" style="width: 170px"><span class="tc-red">*</span> 选择职业分类：</div>
      <a-select v-model="careerTypeId" :options="itemLst" placeholder="请选择" style="width: 240px" @change="onCareerTypeChange" />
    </div>
    <div class="mb12 flex-center">
      <div class="ta-right" style="width: 170px"><span class="tc-red">*</span> 保费：</div>
      <a-input v-model="monthAmount" disabled placeholder="请选择方案" style="width: 240px" />
    </div>
    <div slot="footer" class="ta-right">
      <a-space :size="16">
        <a-button type="primary" @click="doConfirm">提交</a-button>
        <a-button @click="doCancel">取消</a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    target: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      modalVisible: false,
      planLst: [],
      itemLst: [],
      schemeId: undefined,
      dateRange: null,
      insCompanyId: undefined,
      monthAmount: "",
      careerTypeId: undefined,
      careerType: ""
    };
  },
  computed: {},
  watch: {
    value: {
      handler(newVal) {
        this.modalVisible = newVal;
      },
      immediate: true
    },
    modalVisible() {
      this.$emit("input", this.modalVisible);
      this.$emit("change", this.modalVisible);
      if (this.modalVisible) {
        this.clear();
        if (this.target && this.target.id) {
          this.schemeId = this.target.schemeId;
          this.insCompanyId = this.target.insCompanyId;
          this.monthAmount = this.target.monthAmount;
          this.careerType = this.target.careerType;
          this.dateRange = [this.$moment(this.target.beginTime), this.$moment(this.target.endTime)];
        }
        this.loadPlanLst();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    onCareerTypeChange(value, node) {
      this.monthAmount = node.data.props.monthAmount;
      this.careerType = node.data.props.careerType;
    },
    onSchemeIdChange(value, node) {
      this.insCompanyId = node.data.props.cId;
      this.itemLst = node.data.props.itemList;
      this.careerTypeId = undefined;
      this.monthAmount = "";
      this.careerType = "";
    },
    loadPlanLst() {
      this.$request({
        url: `/insurance/api/v1/qyCompanySchemes/selectScheme`
      })
        .then((res) => {
          this.planLst = res.data.map((item) => {
            const pId = item.id;
            const tempLst = {
              value: pId,
              label: item.schemeName,
              cId: item.insCompanyId,
              itemList: item.itemList.map((li) => {
                if (this.target && this.target.id && this.schemeId === pId && this.careerType === li.careerType) {
                  this.careerTypeId = li.id;
                }
                return {
                  value: li.id,
                  label: li.careerType,
                  careerType: li.careerType,
                  monthAmount: li.monthAmount
                };
              })
            };
            if (this.target && this.target.id && this.schemeId === pId) {
              this.itemLst = tempLst.itemList;
            }
            return tempLst;
          });
        })
        .catch((err) => {
          console.log("qyCompanySchemes", err);
        });
    },
    clear() {
      this.itemLst = [];
      this.schemeId = undefined;
      this.dateRange = null;
      this.insCompanyId = undefined;
      this.monthAmount = "";
      this.careerTypeId = undefined;
      this.careerType = "";
    },
    doConfirm() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.insCompanyId &&
        this.schemeId &&
        (this.monthAmount || this.monthAmount === 0 || this.monthAmount === "0") &&
        this.careerType
      ) {
        const params = {};
        const dates = this.dateRange.map((item) => item.format("YYYY-MM-DD"));
        params["beginTime"] = dates[0];
        params["endTime"] = dates[1];
        params["insCompanyId"] = this.insCompanyId;
        params["schemeId"] = this.schemeId;
        params["monthAmount"] = this.monthAmount;
        params["careerType"] = this.careerType;
        this.$emit("confirm", params);
        this.modalVisible = false;
      } else {
        console.log(this.dateRange);
        console.log(this.insCompanyId);
        console.log(this.schemeId);
        console.log(this.monthAmount);
        console.log(this.careerType);
        this.$message.warn("有内容未填写");
        return false;
      }
    },
    doCancel() {
      this.modalVisible = false;
    },
    onRangeChange(value) {
      if (value && value.length === 0) {
        this.dateRange = null;
      } else {
        this.dateRange = value;
      }
    },
    onPanelChange(value) {
      this.dateRange = value;
    }
  }
};
</script>
<style lang="scss"></style>
